<!-- 调查经费落实情况 -->
<template>
  <div class="whole-process-container">
    <el-row style="margin-bottom:10px;">
      <el-col :span="4">
        <!-- <i class="el-icon-edit-outline"></i> -->
        <div style="min-height: 1px;"></div>
      </el-col>
      <el-col :span="16" align="center">
        <h3>调查经费落实情况</h3>
        <h6>县级调查单元(单位：万元)</h6>
        <h6 style="color:red" v-permission="[4]">请填写本级的经费情况，不包含上级经费</h6>
        <el-select v-model="cityId" placeholder="请选择市" style="width: 200px;" clearable size="small" v-permission="[1]">
          <el-option v-for="(val, key) in city" :filterable="true" :key="key" :label="val" :value="key">
          </el-option>
        </el-select>
        <el-select v-model="areaId" placeholder="请选择区县" ref="area" clearable size="small" @change="setData(areaId)" v-permission="[1, 3]">
          <el-option v-for="(val, key) in area" :filterable="true" :key="key" :label="val" :value="key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" align="right">
            <div style="min-height: 1px;"></div>
        <el-button v-if="appropriationData.status === 'BC' " @click="saveAppropriation" type="primary"
          v-permission="[4]">保存</el-button>
        <!-- <el-button v-if="appropriationData.status === 'BC' " @click="submitAppropriation" type="primary">提交</el-button> -->
      </el-col>
    </el-row>
    <el-row style>
      <el-col :span="16" align="center"></el-col>
    </el-row>
    <el-row class="v-align">
      <el-col :span="10" align="center">
        请选择落实方式:
        <el-select size="small" v-model="appropriationData.jflsfs" placeholder="请选择落实方式" clearable>
          <el-option label="总体落实" value="ZTLS"></el-option>
          <el-option label="分年度落实" value="NDLS"></el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <span class="demonstration">是否为贫困县:</span>
        <el-radio-group v-model="appropriationData.sfwpkx" size="mini">
          <el-radio label="GJ">国家级贫困县</el-radio>
          <el-radio label="SJ">省级贫困县</el-radio>
          <el-radio label="F">否</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-timeline>
          <template v-for="(item,index) in appropriationData.nd_pf_ls">
            <el-timeline-item timestamp placement="top" :key="index">
              <el-card class="tudou-card-suffix">
                <el-col :span="3">
                  <h3>{{ item.nd }}</h3>
                </el-col>
                <el-col :span="8">
                  批复 :
                  <div class="el-input el-input-group el-input-group--append el-input--suffix">
                      <input v-model="item.pf" v-nativeMoney type="text" autocomplete="off" placeholder="金额" class="el-input__inner">
                      <div class="el-input-group__append">万元</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  落实 :
                  <div class="el-input el-input-group el-input-group--append el-input--suffix">
                        <input v-model="item.ls" v-nativeMoney type="text" autocomplete="off" placeholder="金额" class="el-input__inner">
                        <div class="el-input-group__append">万元</div>
                    </div>
                </el-col>
              </el-card>
            </el-timeline-item>
          </template>
        </el-timeline>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import report from "../../apiUrl/reportApi";
import pca from '@/libs/pca-code'

export default {
  data() {
    return {
      appropriationData: {
        status: 'BC',
        id: "",
        jflsfs: "",
        sfwpkx: "F",
        nd_pf_ls: [
          { nd: "2017", pf: 0, ls: 0 },
          { nd: "2018", pf: 0, ls: 0 },
          { nd: "2019", pf: 0, ls: 0 },
          { nd: "2020", pf: 0, ls: 0 }
        ]
      },
      cityId: '',
      areaId: '',
    };
  },
  methods: {
    handleChange(el, { val }) {
      console.log(val);
    },
    saveAppropriation() {
      if (this.validation()) {
        report.saveAppropriationReport(this.appropriationData).then(rs => {
          if (rs.data.success) {
            this.appropriationData.id = rs.data.data;
            this.$alert("保存成功", "提示", {
              confirmButtonText: "确定",
              type: "success",
              callback: action => {}
            });
          }else {
            this.$alert(rs.data.message, "提示", {
                confirmButtonText: "确定",
                type: "warning",
                callback: action => {}
            });
          }
        });
      }else {
         this.appropriationData.status = 'BC'
      }
    },
    submitAppropriation(){
        this.appropriationData.status = 'TJ'
        this.saveAppropriation()
    },
    validation() {
      if (this.appropriationData.jflsfs === "") {
        this.$alert("落实方式不能为空", "提示", {
          confirmButtonText: "确定",
          type: "error",
          callback: action => {}
        });
        return false;
      }
      return true;
    },
    setData(id) {
      let that = this
      report.getAppropriationReport(id ? {area_id: id} : null).then(rs => {
          if(rs.data.data){
              if(rs.data.data.id){
                  that.appropriationData = rs.data.data
              }
          } else {
            that.appropriationData = {
              status: 'BC',
              id: "",
              jflsfs: "",
              sfwpkx: "F",
              nd_pf_ls: [
                { nd: "2017", pf: 0, ls: 0 },
                { nd: "2018", pf: 0, ls: 0 },
                { nd: "2019", pf: 0, ls: 0 },
                { nd: "2020", pf: 0, ls: 0 }
              ]
            }
          }
      })
    }
  },
  mounted(){
    // 市限
    this.cityId = Object.keys(this.city)[0]
    this.$nextTick(() => {
      this.areaId = this.$store.getters.userType === 4 ? this.$store.getters.areaId : Object.keys(this.area)[0]
      this.setData(this.areaId)
    })
  },
  computed: {
    city() {
      let type = this.$store.getters.userType
      if (type === 1) {
        return pca[610000]
      } else {
        return []
      }
      
    },
    area() {
      let type = this.$store.getters.userType
      if (type === 1) {
        this.areaId = ''
        return this.cityId ? pca[this.cityId] : {}
      } else {
        return pca[this.$store.getters.cityId]
      }
    },
  }
};
</script>

<style>
.tudou-card-suffix {
  height: 100px;
}
.tudou-card-suffix .el-input {
  margin-right: 15px;
  width: 200px;
}
</style>
